<!DOCTYPE html>
<html lang="en">
<head>
<link href='https://lh3.googleusercontent.com/-alQeYiU4m7g/UX-7FfZqnnI/AAAAAAAABng/2V64wOFcdFM/s48/favicon%25281%2529.ico' rel='shortcut icon' type='image/x-icon'/>
    <meta charset="utf-8">
    <title>CSS Beautify</title>
    <script src="http://project-fullblogdesign.googlecode.com/svn/trunk/codemirror.js" charset="utf-8"></script>
    <script src="http://project-fullblogdesign.googlecode.com/svn/trunk/css.js" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="http://project-fullblogdesign.googlecode.com/svn/trunk/codemirror.css"/>
    <link rel="stylesheet" type="text/css" href="http://project-fullblogdesign.googlecode.com/svn/trunk/style.css"/>
    <script src="http://project-fullblogdesign.googlecode.com/svn/trunk/cssbeautify.js" charset="utf-8"></script>
    <script src="http://project-fullblogdesign.googlecode.com/svn/trunk/format.js" charset="utf-8"></script>
</head>
<body>
<div class="container">
    <h1>CSS Beautify <small>automatically formats your style to be consistent and easy to read</small></h1>
    <ul>
        <li>Only one blank line between two rulesets</li>
        <li>Closed curly brace is at its own line</li>
        <li>There is no empty line between declarations inside a ruleset</li>
        <li>No space between the property name and colon</li>
        <li>One space between colon and the property value</li>
        <li>Comments are preserved</li>
    </ul>
    <p>For a command-line use, install Node.js <a href="https://npmjs.org/package/cssbeautify">cssbeautify package</a>.</p>
    <div class="raw">
        <h3>Type any unformatted CSS:</h3>
        <textarea id="raw" rows="22" autofocus="autofocus" spellcheck="false" onChange='format()' onKeyDown='format()'>menu{color:red} navigation{background-color:#333 /* darkgrey */}</textarea>
    </div>
    <div class="formatted">
        <h3>Beautified CSS:</h3>
        <textarea id="beautified" rows="22" readonly></textarea>
    </div>
    <div class="options">
        <h3>Options:</h3>
        <p>Indent with<br>
        <label><input checked type="radio" name="indent" id="fourspaces" value="fourspaces" onChange='format()'>4 spaces</label><br>
        <label><input type="radio" name="indent" id="twospaces" value="twospaces" onChange='format()'>2 spaces</label><br>
        <label><input type="radio" name="indent" id="tab" value="tab" onChange='format()'>tab</label>
        </p>
        <p>Open curly brace:<br>
        <label><input checked type="radio" name="openbrace" id="openbrace-end-of-line" onChange='format()'>end of line</label><br>
        <label><input type="radio" name="openbrace" id="openbrace-separate-line" onChange='format()'>separate line</label>
        </p>
        <p><label><input checked type="checkbox" name="autosemicolon" id="autosemicolon" onChange='format()'>Automatic semicolon</label></p>
    </div>
    <br clear="all"/>
    <div class="footer"><strong><a href="http://www.fullblogdesign.com/">CSS Beautify</a></strong> is an open-source project from <a href="http://senchalabs.org">Sencha Labs</a>.<br>Check the repository at <a href="http://github.com/senchalabs/cssbeautify">github.com/senchalabs/cssbeautify</a>.</div>
</div>
  </div>
</body>
</html>
